<template>
  <swiper
    class="top-banner-swiper"
    :circular="true"
    :autoplay="true"
    :interval="5000"
  >
    <swiper-item
      class="top-banner-swiper-item"
      v-for="(item, index) in topBannerList"
      :key="index"
    >
      <image
        class="top-banner-swiper-item-image"
        :src="item.adImg"
      />
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  name: "TopBanner",
  data() {
    return {
      topBannerList: [
        {
          adImg: "/static/images/index/ads/1.png"
        },
        {
          adImg: "/static/images/index/ads/2.jpg"
        },
        {
          adImg: "/static/images/index/ads/3.png"
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.top-banner-swiper {
  width: 100%;
  height: 632rpx;
  position: relative;
  z-index: 1;

  &-item {
    width: 100%;
    height: 100%;
    &-image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
